<template>
  <div class="flex justify-center">
   <div style="width:800px;">
    <div class="rounded-lg shadow-sm">
    <a-alert
    message="免责声明"
    :description="sysMzDesc"
    type="warning"
    show-icon="true"
    />
    </div>
     <!--系统公告-->
    <div class="flex flex-col rounded-lg p-2 mt-3 shadow-sm" style="background:#ffffff">
       <span class=" font-bold">系统公告</span>
       <a-list item-layout="vertical" size="large"  :data-source="xtgglistData">
        <template #renderItem="{ item }">
          <a-list-item key="item.title">
            <div class="flex flex-col">
              <div>
              <BellOutlined style="color:#557bfa"  class="pr-2"/>
               {{item.title}}
              </div>
              <div class="ml-4 mt-2 pt-2 pl-2 rounded" style="background-color:#fff">
                <MarkdownViewer :value="item.wzcontent"/>
                数据更新时间：{{ dataUpdateTime }}
              </div>
            </div>
          </a-list-item>
        </template>
       </a-list>
    </div>

    <!--常见问题-->
    <div class="flex flex-col rounded-lg p-2 mt-3 shadow-sm" style="background:#ffffff">
       <span class=" font-bold">常见问题</span>
       <a-list item-layout="vertical" size="large"  :data-source="cjwtlistData">
    
        <template #renderItem="{ item }">
          <a-list-item key="item.title">
            <div class="flex flex-col">
              <div>
              <SendOutlined style="color:#557bfa" class="pr-2"/> {{item.title}}
              </div>
             
              <div class="ml-4 mt-2 pt-2 pl-2 rounded" style="background-color:#fff" >
                <MarkdownViewer :value="item.wzcontent"/>
              </div>
              
            </div>
          </a-list-item>
        </template>
       </a-list>
    </div>
  </div>
  </div>
</template>

<script lang="ts">

import { ref,defineComponent,onMounted } from 'vue';
import { List,Alert,ListItem } from 'ant-design-vue';
import { newslistapi, getDictValue} from '/@/api/dp/dpbaseapi';
import { SendOutlined ,BellOutlined} from '@ant-design/icons-vue';
import { MarkdownViewer } from '/@/components/Markdown';
export default defineComponent({
  components: {
    AList:List,
    AListItem:ListItem,
    AAlert:Alert
  },
})
</script>

<script lang="ts" setup>

   const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 20,
  };
  const cjwtlistData=ref([]);
  const xtgglistData=ref([]);
  const sysMzDesc = ref('');
  const dataUpdateTime = ref('');
  
  async function getNewslist() {
    const res=  await newslistapi({xwtype:'4'});
    cjwtlistData.value=res.list;
    const res2=  await newslistapi({xwtype:'1'});
    xtgglistData.value=res2.list;
  }

  defineExpose({getNewslist});

  async function getDictValueString(){
    sysMzDesc.value = await getDictValue({
      'dictType': 'dp.mianze.description'
    });

    dataUpdateTime.value = await getDictValue({
      'dictType': 'dp.data.update.time'
    });
  }

  onMounted(async ()=>{
    getNewslist();
    await getDictValueString();
  });
</script>